<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physics-canvas" width="700" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physics-canvas');
        const ctx = canvas.getContext('2d');

        // Style defaults
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '20px Arial';

        // --- Draw the piece of glass ---
        // A path with lineJoin='round' is used to approximate the rounded vertical edges seen in the diagram.
        const p_top_back_left = { x: 350, y: 150 };
        const p_top_back_right = { x: 550, y: 150 };
        const p_top_front_right = { x: 580, y: 200 };
        const p_bottom_front_right = { x: 580, y: 240 };
        const p_bottom_front_left = { x: 380, y: 240 };
        const p_top_front_left = { x: 380, y: 200 };
        
        ctx.lineJoin = 'round';
        ctx.beginPath();
        ctx.moveTo(p_top_back_left.x, p_top_back_left.y);
        ctx.lineTo(p_top_back_right.x, p_top_back_right.y);
        ctx.lineTo(p_top_front_right.x, p_top_front_right.y);
        ctx.lineTo(p_bottom_front_right.x, p_bottom_front_right.y);
        ctx.lineTo(p_bottom_front_left.x, p_bottom_front_left.y);
        ctx.lineTo(p_top_front_left.x, p_top_front_left.y);
        ctx.closePath(); // Connects back to the start point
        ctx.stroke();

        // Draw the inner top-front edge that is visible
        ctx.beginPath();
        ctx.moveTo(p_top_front_left.x, p_top_front_left.y);
        ctx.lineTo(p_top_front_right.x, p_top_front_right.y);
        ctx.stroke();

        ctx.lineJoin = 'miter'; // Reset line join for other elements

        // --- Draw Annotations ---

        // Area annotation
        ctx.textAlign = 'left';
        ctx.fillText('area 0.15 m\u00B2', 380, 100);
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        ctx.moveTo(490, 110); // Start of the pointer line
        ctx.lineTo(470, 160); // End of the pointer line, on the top surface
        ctx.stroke();
        ctx.lineWidth = 2; // Reset line width

        // Thickness annotation
        ctx.textAlign = 'right';
        ctx.fillText('thickness 2.0 cm', 280, 225);

        // Dashed lines for thickness dimension
        ctx.save();
        ctx.lineWidth = 1;
        ctx.setLineDash([5, 5]);
        ctx.beginPath();
        ctx.moveTo(250, p_top_front_left.y);
        ctx.lineTo(p_top_front_left.x - 20, p_top_front_left.y);
        ctx.moveTo(250, p_bottom_front_left.y);
        ctx.lineTo(p_bottom_front_left.x - 20, p_bottom_front_left.y);
        ctx.stroke();
        ctx.restore();

        // Vertical double-headed arrow for thickness
        const arrowX = 310;
        ctx.beginPath();
        ctx.lineWidth = 1;
        // Vertical line
        ctx.moveTo(arrowX, p_top_front_left.y);
        ctx.lineTo(arrowX, p_bottom_front_left.y);
        // Top arrowhead
        ctx.moveTo(arrowX, p_top_front_left.y);
        ctx.lineTo(arrowX - 5, p_top_front_left.y + 7);
        ctx.moveTo(arrowX, p_top_front_left.y);
        ctx.lineTo(arrowX + 5, p_top_front_left.y + 7);
        // Bottom arrowhead
        ctx.moveTo(arrowX, p_bottom_front_left.y);
        ctx.lineTo(arrowX - 5, p_bottom_front_left.y - 7);
        ctx.moveTo(arrowX, p_bottom_front_left.y);
        ctx.lineTo(arrowX + 5, p_bottom_front_left.y - 7);
        ctx.stroke();
        ctx.lineWidth = 2; // Reset line width

        // --- Draw Caption ---
        const captionY = 350;
        const figText = 'Fig. 1.1 ';
        const restText = '(not to scale)';
        
        ctx.font = 'bold 20px Arial';
        const figWidth = ctx.measureText(figText).width;
        ctx.font = '20px Arial';
        const restWidth = ctx.measureText(restText).width;
        
        const totalWidth = figWidth + restWidth;
        const startX = (canvas.width / 2) - (totalWidth / 2);

        ctx.textAlign = 'left';
        ctx.font = 'bold 20px Arial';
        ctx.fillText(figText, startX, captionY);
        ctx.font = '20px Arial';
        ctx.fillText(restText, startX + figWidth, captionY);

    </script>
</body>
</html>